<template>
  <div id="customize">
    <div>
      <el-row>
        <el-col :span="12">
          <div>
            <p>待确认数据</p>
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :headers="headers"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="trainUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <p>种子文件</p>
            <el-upload
              class="upload-demo"
              ref="uploads"
              action="http://134.175.30.84:8080/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              @on-success="uploadSuccess"
              @on-error="uploadError"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="testUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <div v-for="(tag, index) in dynamicTagList.dynamicTag" :key="index">
            <el-row>
              <el-col :span="8">
                <span>请输入标签</span>
                <el-input size="mini" placeholder="请输入标签" v-model="tag.name" :inline="true" style="width: 200px"></el-input>
              </el-col>
              <el-col :span="8">
                <span>请输入标签数量</span>
                <el-input style="width: 200px" size="mini" v-model="tag.val"></el-input>
              </el-col>
              <el-col :span="8">
                <div class="inline-block">
                  <i @click="handleDel" class="iconfont icon-close"></i>
                  <i @click="handleAdd" class="iconfont icon-add"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-button type="primary" @click="commit">提交</el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        trainUrl: 'http://134.175.30.84:8080/upload',
        headers: {'Access-Control-Allow-Origin': '*'},
        dynamicTagList: {
          dynamicTag: [{
            name: '',
            val: ''
          }]
        },
        fileList: []
      }
    },
    methods: {
      handlePreview () {},
      handleRemove () {},
      trainUpload () {
        this.$refs.upload.submit()
      },
      testUpload () {},
      handleDel () {},
      handleAdd () {},
      commit () {},
      uploadSuccess (data) {},
      uploadError (err) {
        err = ''
      }
    }
  }
</script>
<style lang="stylus" scoped>
#customize
  .inline-block
    .iconfont
      margin 0 10px 0 5px
      color #d8dce5
      cursor pointer
</style>
